import React, {
	Component
} from 'react';
import {
	AppRegistry,
	Platform,
	TouchableOpacity,
	StyleSheet,
	Navigator,
	View,
	Image,
	Text,
	TextInput
} from 'react-native';
import hhh from './home';
const defaultRoute = {
	component: hhh
};
class navigation extends Component {
	_renderScene(route, navigator) {
		let Component = route.component;
		return( <
			Component {...route.params
			}
			navigator = {
				navigator
			}
			/>
		);
	}
	_renderNavBar() {
		const styles = {
			title: {
				flex: 1,
				alignItems: 'center',
				justifyContent: 'center',
				flexDirection: 'row',
				paddingLeft: 10,
				paddingRight: 10,
				padding: 4,

			},
			button: {
				flex: 1,
				width: 50,
				alignItems: 'center',
				justifyContent: 'center'
			},
			buttonText: {
				fontSize: 18,
				color: '#FFFFFF',
				fontWeight: '400'
			},
			imagesize: {
				width: 28,
				height: 22
			},
			searchInput: {

				padding: 4,
				marginRight: 5,
				marginLeft: 80,
				flex: 4,
				fontSize: 18,
				borderWidth: 0,
				backgroundColor: 'white',
				borderColor: '#000000',
				borderRadius: 8,
				paddingLeft: 92,
				alignItems: 'center',
				//width:400,

				color: '#000000'
			}
		}
		


var j=0;
var searchstr='qq'
		var routeMapper = {
			

			onSearchTextChanged(event){
				j++;
				console.log('onSearchTextChanged');
			alert( event.nativeEvent.text);
//			this.setState({ searchString: event.nativeEvent.text });
			searchstr=event.nativeEvent.text;
			//console.log(this.state.searchString);
			},
			LeftButton(route, navigator, index, navState) {
				if(index > 0) {
					return( < TouchableOpacity onPress = {
							() => navigator.pop()
						}
						style = {
							styles.button
						} >

						< Image source = {
							require('./img/leftImage1.jpg')
						}
						style = {
							styles.imagesize
						} /> 
						< /TouchableOpacity>
					);
					//        <Text style={styles.buttonText}>Back</Text>
				} else {
					return( < TouchableOpacity onPress = {
							() => navigator.pop()
						}
						style = {
							styles.button
						} >
						< Text style = {
							styles.buttonText
						} > Logo < /Text>
						< /TouchableOpacity>
					);
				}
			},
			RightButton(route, navigator, index, navState) {
				if(index > 0 && route.rightButton) {
					return( < TouchableOpacity onPress = {
							() => navigator.pop()
						}
						style = {
							styles.button
						} >
						< Text style = {
							styles.buttonText
						} >
						< /Text>
						< /TouchableOpacity>
					);
				} else {
					return null
				}

			},
			Title(route, navigator, index, navState) {
				      	if(route.params){
//				      		return( < View style = { styles.title } >
		
						alert(route.params.other);
							return  route.params.other;
						
	
//						< /View>
			
      		
      		
      	}
				if(index == 0) {
					return( < View style = {
							styles.title
						} >

						< TextInput style = { styles.searchInput }
						autoCorrect = { false }

		
						clearButtonMode = "always"
						onChange={this.onSearchTextChanged.bind(this)}
						placeholder = 'Search....' / >
						< /View>
					);
				} 
//										
				else {
					return( < View style = { styles.title } >
						< Text style = { styles.buttonText } > 
						{
							route.title ? route.title : 'Splash'
						} 
						< /Text>
						< /View>
					);
				}

			}
		};

		return( < Navigator.NavigationBar style = {
				{
					alignItems: 'center',
					backgroundColor: '#55ACEE',
					shadowOffset: {
						width: 1,
						height: 0.5,
					},
					shadowColor: '#55ACEE',
					shadowOpacity: 0.8,
				}
			}
			routeMapper = {
				routeMapper
			} />
		);
	}
	render() {
		return( <
			Navigator initialRoute = {
				defaultRoute
			}
			renderScene = {
				this._renderScene
			}
			sceneStyle = {
				{
					paddingTop: (Platform.OS === 'android' ? 66 : 74)
				}
			}
			navigationBar = {
				this._renderNavBar()
			}
			/>
		);
	}
}
//
//const styles = StyleSheet.create({
//container: {
//  flex: 1,
//  justifyContent: 'center',
//  alignItems: 'center',
//  backgroundColor: '#F5FCFF',
//},
//welcome: {
//  fontSize: 20,
//  textAlign: 'center',
//  margin: 10,
//},
//instructions: {
//  textAlign: 'center',
//  color: '#333333',
//  marginBottom: 5,
//},
//});

AppRegistry.registerComponent('navigation', () => navigation);